<!DOCTYPE html>
<html lang="zh-cn" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8"/>
    <title>DeathGhost-我的购物车</title>
    <meta name="keywords" content="DeathGhost,DeathGhost.cn,web前端设,移动WebApp开发"/>
    <meta name="description" content="DeathGhost.cn::H5 WEB前端设计开发!"/>
    <meta name="author" content="DeathGhost"/>
    <link href="/style/style.css" rel="stylesheet" type="text/css"/>
    <script type="text/javascript" src="/js/axios.min.js"></script>
    <script type="text/javascript" src="/js/public.js"></script>
    <script type="text/javascript" src="/js/jquery.js"></script>
    <script type="text/javascript" src="/js/jqpublic.js"></script>
    <script src="/js/vue.js"></script>
    <script src="/js/layer/layer.js"></script>
   <!-- <link rel="stylesheet" href="//unpkg.com/layui@2.6.8/dist/css/layui.css">
    <script src="//unpkg.com/layui@2.6.8/dist/layui.js">
-->
    <script>


    </script>
</head>
<body>
<header class="header">


</header>
<script>

    $('.header').load('/header.html', function (responseTxt, statusTxt, xhr) {
        console.log('responseTxt,statusTxt,xhr')
    })

</script>
<!--Start content-->
<div id="app">
<form action="/cart_vue/order" id="form1" method="post">
    <div class="gwc" style=" margin:auto;">
        <table cellpadding="0" cellspacing="0" class="gwc_tb1">
            <tr>
                <td class="tb1_td1"><input id="" type="checkbox" v-model="checked" class="selAll" @click="all()"/></td>
                <td class="tb1_td1">全选</td>
                <td class="tb1_td3">商品</td>
                <td class="tb1_td4">原价</td>
                <td class="tb1_td5">数量</td>
                <td class="tb1_td6">单价</td>
                <td class="tb1_td7">操作</td>
            </tr>
        </table>
        <table v-for="(cart,index) in carts" cellpadding="0" cellspacing="0" class="gwc_tb2" id="table1" :key="cart.id">
            <tr>
                <td class="tb2_td1"><input type="checkbox"  v-model="cart.selected1" class="cartIds" :data-cartid="cart.id"  @click="choose(index)"/>
                   </td>
                <td class="tb2_td2"><a href="detailsp.html" target="_blank"><img
                       :src="‘http://192.168.6.186:8081/'+cart.dish.picture"/></a></td>
                <td class="tb2_td3"><a href="detailsp.html" target="_blank">{{cart.dish.dishName}}</a></td>
                <td class="tb1_td4"><s >{{cart.dish.marketPrice}}</s></td>
                <td class="tb1_td5">
                    <input class="reduce" style="width:30px; height:30px;border:1px solid #ccc;" type="button" @click="reduce(index)"
                           value="-">
                    <input class="nums" type="text" v-model="cart.nums"  @blur="blur(index)" ref="num"
                           style=" width:40px;height:28px; text-align:center; border:1px solid #ccc;"/>
                    <input class="add"  style="width:30px; height:30px;border:1px solid #ccc;" type="button" @click="add(index)"
                           value="+"/>
                </td>
                <td class="tb1_td6"><label id="total1" class="tot" style="color:#ff5500;font-size:14px; font-weight:bold;">{{cart.money}}</label></td>
                <td class="tb1_td7"><a href="#" id="delcart1" @click="del(cart.id,index)">删除</a></td>
            </tr>
        </table>
        <table cellpadding="0" cellspacing="0" class="gwc_tb3">
            <tr>
                <td class="tb1_td1"><input type="checkbox" :checked="checked" class="selAll" @click="all()"/></td>
                <td class="tb1_td1">全选</td>
                <td class="tb3_td2 GoBack_Buy Font14"><a href="#" target="_blank">继续购物</a></td>
                <td class="tb3_td2">已选商品
                    <label id="xnum" style="color:#ff5500;font-size:14px; font-weight:bold;">{{count}}</label>件
                </td>
                <td class="tb3_td3">合计(不含运费):<span class="money">￥</span><span style=" color:#ff5500;">
        <label id="zong" style="color:#ff5500;font-size:14px; font-weight:bold;">{{zprice}}</label>
        </span></td>
                <!--<td class="tb3_td4"><a class="jz2" href="javascript:finish()">结算</a></td>-->
                <td class="tb3_td4"><a class="jz2" href="javascript:void(0)" @click="sub">结算</a></td>
            </tr>
        </table>
    </div>
</form>
<!--End content-->

<footer>
    <section class="Otherlink">
        <aside>
            <div class="ewm-left">
                <p>手机扫描二维码：</p>
                <img src="/images/Android_ico_d.gif">
                <img src="/images/iphone_ico_d.gif">
            </div>
            <div class="tips">
                <p>客服热线</p>
                <p><i>1830927**73</i></p>
                <p>配送时间</p>
                <p>
                    <time>09：00</time>
                    ~
                    <time>22:00</time>
                </p>
                <p>网站公告</p>
            </div>
        </aside>
        <section>
            <div>
                <span><i class="i1"></i>配送支付</span>
                <ul>
                    <li><a href="article_read.html" target="_blank" title="标题">支付方式</a></li>
                    <li><a href="article_read.html" target="_blank" title="标题">配送方式</a></li>
                    <li><a href="article_read.html" target="_blank" title="标题">配送效率</a></li>
                    <li><a href="article_read.html" target="_blank" title="标题">服务费用</a></li>
                </ul>
            </div>
            <div>
                <span><i class="i2"></i>关于我们</span>
                <ul>
                    <li><a href="article_read.html" target="_blank" title="标题">招贤纳士</a></li>
                    <li><a href="article_read.html" target="_blank" title="标题">网站介绍</a></li>
                    <li><a href="article_read.html" target="_blank" title="标题">配送效率</a></li>
                    <li><a href="article_read.html" target="_blank" title="标题">商家加盟</a></li>
                </ul>
            </div>
            <div>
                <span><i class="i3"></i>帮助中心</span>
                <ul>
                    <li><a href="article_read.html" target="_blank" title="标题">服务内容</a></li>
                    <li><a href="article_read.html" target="_blank" title="标题">服务介绍</a></li>
                    <li><a href="article_read.html" target="_blank" title="标题">常见问题</a></li>
                    <li><a href="article_read.html" target="_blank" title="标题">网站地图</a></li>
                </ul>
            </div>
        </section>
    </section>
    <div class="copyright">© 版权所有 2016 DeathGhost 技术支持：<a href="http://www.deathghost.cn"
                                                          title="DeathGhost">DeathGhost</a></div>
</footer>
</div>
<script>
    new Vue({
        el:"#app",
        data:{
            carts:[],
            zprice:0,
            //选中商品数量
            count:0,
            checked:false,
            //选中个数
            s:0
        },

        methods:{
            choose:function(index){
                this.count=0;
                this.zprice=0;
                this.s=0;
                this.carts[index].selected1=!this.carts[index].selected1;
                for(let cart of this.carts){
                    if(cart.selected1==true){
                        this.s=this.s+1
                    }
                }
                if(this.s==this.carts.length){
                    this.checked=true;
                }else{
                    this.checked=false;
                }
                this.totalPay();
            },
            //全选与否
            all:function (){
                this.count=0;
                this.checked=!this.checked;

                    for (let cart of this.carts) {
                        cart.selected1=this.checked;
                    }

                this.totalPay();
            },
            upnum:function (id,num){
                axios.post("/cart_vue/upnum",{
                    id:id,
                    nums:num
                }).then(r=>{
                    // if(r.data.code===200){
                    //     alert("成功")
                    // }else if(r.data.code===501){
                    //     alert("失败")
                    // }
                });
            },
            //失去焦点改定数量  同时 更新数据库 同时计算总价
            blur(index){
                let nums =this.carts[index].nums;
                let ex = /^\d+$/;
                if (!ex.test(nums)) {
                   this.carts[index].nums=1;
                }
                this.totalPay();
                this.upnum(this.carts[index].id,this.carts[index].nums);
            },
            //减少数量  同时更新数据库   同时计算总价
            reduce(index){
                if(this.carts[index].nums>=2){
                    this.carts[index].nums=Number(this.carts[index].nums)-1;
                    this.totalPay();
                    this.upnum(this.carts[index].id,this.carts[index].nums);
                }else {
                    return;
                }
            },
            //增加数量  同时更新数据库  同时计算总价
            add(index){
                this.carts[index].nums=Number(this.carts[index].nums)+1;
                this.totalPay();
                this.upnum(this.carts[index].id,this.carts[index].nums);
            },
            //计算总价
            totalPay(){
                let cartList=this.carts;
                let money=0;
                for(let cart of cartList){
                    if(cart.selected1){
                        money=money+Number(cart.nums)*Number(cart.money);
                        this.count=this.count+1;
                    }
                };
                this.zprice=money;
            },
            //删除订单
            del(cartid,index){
                axios.get("/cart_vue/del?id="+cartid).then(r=>{
                    if(r.data.code===200){
                        this.carts.splice(index,1);
                        alert("删除成功");
                    }else if(r.data.code===501){
                        alert(r.data.msg);
                    }
                })
            },
            sub(){
                let cartsList=this.carts;
                let cartsub=[];
                for (const cart of cartsList) {
                    if(cart.selected1){
                        cartsub.push(cart);
                    }
                }
                if(cartsub.length!=0){
                    localStorage.setItem("carts",JSON.stringify(cartsub));
                  location.href="/cart_vue/order"
                }else {
                    layer.msg("请选择一件商品",{
                        icon:1,
                        time:1000
                    })
                }

            }
        },
        mounted:function(){
            axios.get("/cart_vue/list").then(r=>{
                if(r.data.code===200){
                    this.carts=r.data.data;
                   /* this.totalPay();
                     if(this.count==this.carts.length){
                        this.checked=true;
                        console.log(this.count);
                    };*/
                }
            })
        }
    })
    function finish(){
        let form1=document.getElementById("form1");
        let cartIds=document.getElementsByClassName("cartIds");
        console.log(cartIds);
        for(let cartId of cartIds){
            if(cartId.checked){
                //创建标签       附带商品ID
                let gid=document.createElement("input");
                gid.type="text";
                gid.name="id";
                gid.value=cartId.getAttribute("data-cartid");
                form1.appendChild(gid);
                console.log(cartId.getAttribute("data-cartid"));
            }
        }
        form1.submit();
    }
</script>
</body>
</html>
